<template>
  <div class="">
    <h1 @click="alertMsg">{{ toastInfo.msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'DialogBox',
  props: {
    toastInfo:{
      type:Object,
      default:function(){
        return {
          msg: '点击此处弹出弹框',
          toastTitle: "您确认此操作吗",
          confirmInfo: '您点击了确认',
          cancelInfo: '你点击了取消'
        }
      }
    },
  },
  methods: {
    alertToast: function() {
      this.$toast({
        message: '提示',
        position: 'bottom',
        duration: 5000
      })
    },
    alertMsg: function() {
      this.$messagebox.confirm(this.toastInfo.toastTitle).then(() => {
        this.$toast(this.toastInfo.confirmInfo)
      }).catch(() => {
        this.$toast(this.toastInfo.cancelInfo)
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
